import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xin_he/page/login/xin_he_qr_scanner/xin_he_qr_scanner_view.dart';
import 'package:xin_he/utils/xin_he_count_down_widget.dart';

import '../../../utils/xh_styles.dart';
import '../../../utils/xin_he_image.dart';
import '../../../utils/xin_he_input_widget.dart';
import '../xin_he_login/xin_he_login_view.dart';
import 'xin_he_register_logic.dart';

class XinHeRegisterPage extends StatelessWidget {
  XinHeRegisterPage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeRegisterLogic());
  final state = Get.find<XinHeRegisterLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Obx(() => Container(
      width: Get.width,
      height: 537.5+Get.mediaQuery.padding.bottom,
      color: Colors.transparent,
      child: Stack(children: [

        Positioned(
            top: 37.5,
            bottom: 0,
            child: XinHeAssetImage('assets/images/login/login_bg.png',width: Get.width,height: 500+Get.mediaQuery.padding.bottom,)
        ),

        Positioned(
            left: 0,
            bottom:0 ,
            right: 0,
            top: 0,
            child: Container(
              height: 500+Get.mediaQuery.padding.bottom,
              width: Get.width,
              padding: const EdgeInsets.symmetric(horizontal: 37.5),
              color: Colors.transparent,
              child: Column(children: [

                const XinHeAssetImage('assets/images/login/avatar.png',width: 65,height: 65,),
                const SizedBox(height: 35,),
                
                ///昵称
                Container(
                  alignment: Alignment.centerLeft,
                  padding: const EdgeInsets.symmetric(horizontal: 15),
                  height: 45,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(22.5),
                      border: Border.all(color: XinHeStyle.mainGreenColor,width: 0.5)),
                  child: Row(children: [
                    const XinHeAssetImage('assets/images/login/login_user.png',width: 19,height: 19,),
                    const SizedBox(width: 5,),
                    Expanded(child: XinHeInputWidget('', '请输入您的姓名', (value){
                      logic.onNameChange(value);
                    },keyboardType: TextInputType.text,maxInputLength: 11,isHiddenLine: true,))
                  ],),
                ),

                const SizedBox(height: 15,),

                Container(
                  alignment: Alignment.centerLeft,
                  padding: const EdgeInsets.symmetric(horizontal: 15),
                  height: 45,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(22.5),
                      border: Border.all(color: XinHeStyle.mainGreenColor,width: 0.5)),
                  child: Row(children: [
                    const XinHeAssetImage('assets/images/login/login_phone.png',width: 19,height: 19,),
                    const SizedBox(width: 5,),
                    Expanded(child: XinHeInputWidget('', '请输入您的手机号', (value){
                      logic.onPhoneChange(value);
                    },keyboardType: TextInputType.phone,maxInputLength: 11,isHiddenLine: true,)),

                    // Container(
                    //   height: 22,
                    //   width: 0.5,
                    //   color: XinHeColor('#87BABA'),
                    // ),
                    //
                    //
                    // XinHeTimerCountDownWidget(
                    //   norText: '微信授权  ',
                    //   themeColor: state.codeEnable.value? XinHeColor("#10C9C9"):XinHeColor('10C9C9'),
                    //   onStarEvent: (){
                    //
                    //   },
                    //   // maxSec : 120,180
                    // )
                  ],),
                ),
                const SizedBox(height: 15,),


                ///   验证码
                Container(
                  alignment: Alignment.centerLeft,
                  padding: const EdgeInsets.only(left: 15),
                  height: 45,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(22.5),
                      border: Border.all(color: XinHeStyle.mainGreenColor,width: 0.5)),
                  child: Row(children: [
                    const XinHeAssetImage('assets/images/login/sms_code.png',width: 19,height: 19,),
                    const SizedBox(width: 5,),
                    Expanded(child: XinHeInputWidget('', '请输入您的验证码', (value){  
                      logic.onCodeChange(value);
                    },keyboardType: TextInputType.number,maxInputLength: 6,isHiddenLine: true,)),
                    Container(
                      height: 22,
                      width: 0.5,
                      color: XinHeColor('#87BABA'),
                    ),

                    XinHeTimerCountDownWidget(
                      norText: '发送验证码',
                      themeColor: state.codeEnable.value? XinHeColor("#10C9C9"):XinHeColor('10C9C9'),
                      onStarEvent: (){
                         logic.clickGetCode();
                      },
                    )


                  ],),
                ),

                const SizedBox(height: 15,),

                ///  邀请码
                Container(
                  alignment: Alignment.centerLeft,
                  padding: const EdgeInsets.symmetric(horizontal: 15),
                  height: 45,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(22.5),
                      border: Border.all(color: XinHeStyle.mainGreenColor,width: 0.5)),
                  child: Row(children: [
                    const XinHeAssetImage('assets/images/login/invite_code.png',width: 19,height: 19,),
                    const SizedBox(width: 5,),
                    Expanded(child: XinHeInputWidget('', state.inviteCode.isNotEmpty?state.inviteCode.value: '请输入邀请码', (value){
                      logic.onInviteCodeChange(value);
                    },keyboardType: TextInputType.text,maxInputLength: 16,isHiddenLine: true,)),
                    const SizedBox(width: 8,),
                    GestureDetector(
                      onTap: ()async{

                      var data = await  Get.to(XinHeQrScannerPage());
                      print('data=${data}');
                      logic.onInviteCodeChange(data);
                        // logic.onOcrAction();
                      },
                        child: const XinHeAssetImage('assets/images/login/login_ocr.png',width: 19,height: 19,)),

                  ],),
                ),



                ///立即注册
                GestureDetector(
                  onTap: (){
                    logic.onRegisterAction();
                  },
                  child: Container(
                    margin:  const EdgeInsets.only(left: 0,right: 0,top: 40),
                    height: 45,
                    width: double.infinity,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(color:  XinHeColor('#10C9C9'),borderRadius: BorderRadius.all(Radius.circular(22.5))),
                    child: const Text (
                      "立即注册",
                      style: TextStyle (fontSize: 16,color:  Colors.white,fontWeight: FontWeight.w600) ,
                    ),),
                ),

                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text('已有账号',style: TextStyle(color: XinHeColor('#3A7A74'),fontSize: 13,fontWeight: FontWeight.w500),),
                      // SizedBox(width: 5,),
                      GestureDetector(
                        onTap: (){
                          Get.back();
                          Get.bottomSheet(XinHeLoginPage(),persistent: false,isScrollControlled: true);

                        },
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 5),
                          child: Text('立即登录',style: TextStyle(color: XinHeColor('#08AFAF'),fontSize: 13,fontWeight: FontWeight.w500),),
                        ),
                      )
                    ],),
                ),

                SizedBox(height: 20,),
                Container(
                  color: Colors.transparent,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      GestureDetector(
                        onTap: (){
                          logic.changeSelectedStatus();
                        },
                        child:Obx(() =>  Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 8,vertical: 4),
                          child:  XinHeAssetImage(state.selected.value ?'assets/images/login/login_selected.png':'assets/images/login/login_unselected.png',width: 16,height: 16,fit: BoxFit.fill),
                        )),
                      ),
                      // SizedBox(width: 3.w,),
                      RichText(
                        text: TextSpan(
                            children:
                            [


                              WidgetSpan(
                                child: GestureDetector(
                                  // onTap: logic.toUserProtocolPage,
                                  child: Text(
                                    '我已阅读并接受',
                                    style: TextStyle(
                                      color: XinHeColor("#8C8C8C"),
                                      fontSize: 14,
                                    ),
                                  ),
                                ),
                              ),
                              WidgetSpan(
                                child: GestureDetector(
                                  onTap: (){

                                  },
                                  child: Text(
                                    '《服务协议》',
                                    style: TextStyle(
                                      color: XinHeColor("#1CA6A1"),
                                      fontSize: 14,
                                    ),
                                  ),
                                ),
                              ),
                              WidgetSpan(
                                child: Text(
                                  '与',
                                  style: TextStyle(
                                    color: XinHeColor("#8C8C8C"),
                                    fontSize: 14,
                                  ),
                                ),
                              ),
                              WidgetSpan(
                                child: GestureDetector(
                                  onTap: (){},
                                  child: Text(
                                    '《隐私政策》',
                                    style: TextStyle(
                                      color: XinHeColor("#1CA6A1"),
                                      fontSize: 14,
                                    ),
                                  ),
                                ),
                              ),
                            ]
                        ),
                      )

                    ],
                  ),
                )


              ],),
            )
        ),


      ],),
    ));
  }
}
